<template>
  <!-- <div>
    <van-nav-bar
  title="我的收藏"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
  fixed
/>
  </div> -->
  <div class="cache">
    <van-tabs v-model="active">
      <van-tab title="课程">
        <van-swipe-cell v-for="item in datalist.list5" :key="item.id">
          <van-card :title="item.title" :thumb="datalist.image5">
            <template #desc>
              <span>{{ item.num }} 正在学</span>
            </template>

            <template #price>
              <span>免费</span>
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </van-tab>
      <van-tab title="文章">
        <van-swipe-cell v-for="item in datalist.list6" :key="item.id">
          <van-card :title="item.title" :thumb="datalist.image5">
            <template #num>
              <span>观看 {{ item.num }} </span>
            </template>

            <template #price>
              <span>liulst</span>
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: '',
  data() {
    return {
      datalist: [],
      active: 2,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
  },
  async created() {
    const res = await axios.get('/mock/api/home/list')
    console.log(res.data.data)
    this.datalist = res.data.data
  },
}
</script>

<style lang="less" scoped>
@import '../../style/common.less';
.delete-button {
  height: 100%;
}
.cache {
  margin-top: 2.8rem;
  :deep(.van-card__title) {
    margin-bottom: 6%;
    color: @c10;
    font-weight: 700;
    font-size: 0.7rem;
  }
}

:deep(.van-card__content) {
  justify-content: start;
  color: @g5;
}
:deep(.van-card__price) {
  color: @g5;
}
</style>
